<template>
  <div class="fix pb-20 bg-gray-50 max-w-screen-x1">
    <!-- 收货地址 -->
    <div class="bg-white p-4 mb-3">
      <div class="fix justify-between items-center">
        <div class="flex items-center">
          <i class="fa fa-map-marker text-primary-500 mr-2"></i>
          <div>
            <div class="font-medium">kunkun (先生) 15648759584</div>
            <div class="text-sm text-gray-500 mt-1">杭州市西湖区文一西路969号</div>
          </div>
        </div>
        <i class="fa fa-chevron-right text-gray-400"></i>
      </div>
    </div>

    <!-- 订单详情 -->
    <div class="bg-white mb-3">
      <div class="px-4 py-3 border-b">
        <h3 class="font-medium">订单详情</h3>
      </div>
      <div class="divide-y">
        <div v-for="(productId, index) in Object.keys(cartItems)" :key="index" class="px-4 py-3 flex justify-between">
          <div class="flex">
            <span class="text-sm">{{ findProductById(parseInt(productId)).name }}</span>
            <span class="text-sm text-gray-500 ml-2">x{{ cartItems[productId] }}</span>
          </div>
          <div class="text-sm font-medium">
            ¥{{ (findProductById(parseInt(productId)).price * cartItems[productId]).toFixed(2) }}
          </div>
        </div>
      </div>
      <div class="px-4 py-3 flex justify-between">
        <span>小计</span>
        <span class="font-medium">¥{{ subtotal.toFixed(2) }}</span>
      </div>
      <div class="px-4 py-3 flex justify-between">
        <span>配送费</span>
        <span class="font-medium">¥{{ deliveryFee.toFixed(2) }}</span>
      </div>
    </div>

    <!-- 支付方式 -->
    <div class="bg-white mb-3">
      <div class="px-4 py-3 border-b">
        <h3 class="font-medium">支付方式</h3>
      </div>
      <div class="divide-y">
        <div class="px-4 py-3 flex justify-between items-center cursor-pointer" @click="selectPaymentMethod('alipay')">
          <div class="flex items-center">
            <i class="fa fa-alipay text-blue-500 text-xl mr-3"></i>
            <span>支付宝</span>
          </div>
          <i class="fa fa-check-circle text-primary-500" v-if="selectedPaymentMethod === 'alipay'"></i>
        </div>
        <div class="px-4 py-3 flex justify-between items-center cursor-pointer" @click="selectPaymentMethod('wechat')">
          <div class="flex items-center">
            <i class="fa fa-wechat text-green-500 text-xl mr-3"></i>
            <span>微信支付</span>
          </div>
          <i class="fa fa-check-circle text-primary-500" v-if="selectedPaymentMethod === 'wechat'"></i>
        </div>
      </div>
    </div>

    <!-- 优惠券 -->
    <div class="bg-white mb-3">
      <div class="px-4 py-3 flex justify-between items-center cursor-pointer">
        <div class="flex items-center">
          <i class="fa fa-ticket text-orange-500 mr-2"></i>
          <span>优惠券</span>
        </div>
        <div class="flex items-center">
          <span class="text-sm text-gray-500 mr-2">满20减5</span>
          <i class="fa fa-chevron-right text-gray-400"></i>
        </div>
      </div>
    </div>

    <!-- 备注 -->
    <div class="bg-white mb-3">
      <div class="px-4 py-3 flex justify-between items-center cursor-pointer">
        <div class="flex items-center">
          <i class="fa fa-pencil text-gray-500 mr-2"></i>
          <span>备注</span>
        </div>
        <div class="flex items-center">
          <span class="text-sm text-gray-500 mr-2">选填</span>
          <i class="fa fa-chevron-right text-gray-400"></i>
        </div>
      </div>
    </div>

    <!-- 底部支付栏 -->
    <div class="fix bottom-16 left-0 right-0 bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.1)]">
      <div class="flex items-center justify-between p-3">
        <div>
          <div class="text-sm">实付款</div>
          <div class="font-bold text-lg">¥{{ totalAmount.toFixed(2) }}</div>
        </div>
        <button
            class="px-8 py-3 bg-primary-500 text-white rounded-full font-medium"
            @click="handlePay"
        >
          立即支付
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 购物车数据
const cartItems = ref({})
const subtotal = computed(() => {
  let total = 0
  for (const [productId, quantity] of Object.entries(cartItems.value)) {
    const product = findProductById(parseInt(productId))
    if (product) {
      total += product.price * quantity
    }
  }
  return total
})
const deliveryFee = ref(5.0)
const totalAmount = computed(() => subtotal.value + deliveryFee.value)

// 支付方式
const selectedPaymentMethod = ref('alipay')

// 查找商品
const findProductById = (productId) => {
  // 这里简单模拟，实际项目中应该从API获取完整商品信息
  const mockProducts = {
    101: { name: '香辣鸡腿堡', price: 18.0 },
    102: { name: '吮指原味鸡', price: 16.0 },
    103: { name: '老北京鸡肉卷', price: 15.0 },
    201: { name: '薯条(中)', price: 9.0 },
    202: { name: '吮指原味鸡', price: 10.0 },
    203: { name: '鸡米花', price: 12.0 },
    301: { name: '可口可乐(中)', price: 6.0 },
    302: { name: '冰红茶', price: 6.0 },
    303: { name: '咖啡', price: 10.0 }
  }

  return mockProducts[productId] || { name: '未知商品', price: 0 }
}

// 生命周期钩子
onMounted(() => {
  // 从本地存储恢复购物车数据
  const savedCart = localStorage.getItem('cartItems')
  if (savedCart) {
    cartItems.value = JSON.parse(savedCart)
  }
})

// 选择支付方式
const selectPaymentMethod = (method) => {
  selectedPaymentMethod.value = method
}

// 处理支付
const handlePay = () => {
  // 这里只是模拟支付流程
  alert(`支付成功！使用${selectedPaymentMethod.value === 'alipay' ? '支付宝' : '微信支付'}支付了¥${totalAmount.value.toFixed(2)}`)

  // 清空购物车
  cartItems.value = {}
  localStorage.setItem('cartItems', JSON.stringify({}))

  // 跳转到订单页面
  router.push({ name: 'Orders' })
}
</script>